<template>
    <div class="BaseInfo-container">
        <el-row>
            <el-col :span="24">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <el-row>
                            <el-col>
                                <img src="../../../static/img/avatar/user2-160x160.jpg" alt="">
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col style="text-align: center">
                                <el-button>编辑头像</el-button>
                            </el-col>
                        </el-row>
                    </el-col>


                    <el-col :span="21">
                        <el-row>
                            <el-col>
                                <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                                    <el-form-item label="用户姓名：" prop="realName">
                                        <el-input v-model="form.realName" style="width: 306px;"></el-input>
                                    </el-form-item>

                                    <el-form-item label="邮箱地址：" prop="email">
                                        <el-input v-model="form.email"style="width: 306px;"></el-input>
                                    </el-form-item>

                                    <el-form-item label="手机号码：" prop="mobile">
                                        <div class="mobile">
                                            <el-input v-model="form.mobile" style="width: 200px;"></el-input>

                                            <el-button @click="getIdentifyCode" :disabled="canGetIdentifyCode" style="background: #f7f7f7; color: #495060">{{gettingIdentifyCodeBtnContent}}</el-button>
                                            <div class="inputCode" v-show="inputCodeVisible">
                                                <div class="wrapper">
                                                    <el-input v-model="securityCode" placeholder="请填写短信验证码"></el-input>
                                                    <div class="margin-top-10">
                                                        <el-button @click="inputCodeVisible=false">取消</el-button>
                                                        <el-button type="primary">保存</el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="登录账号：" prop="name">
                                        {{ user.account }}
                                    </el-form-item>
                                    <el-form-item label="登录登录：" prop="name">
                                        <el-button type="text" @click="dialogEditPassDialogVisible = true">修改密码</el-button>
                                    </el-form-item>
                                    <el-form-item label="角色：" prop="name">
                                        <template v-for="item in roles">
                                            <el-tag  style="margin-right: 5px;background: rgb(242, 94, 67);">{{ item.name }}</el-tag>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="所属组：" prop="name">
                                        <template v-for="item in groups">
                                            <el-tag style="margin-right: 5px;background: rgb(45, 140, 240);">{{ item.name }}</el-tag>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="部门：" prop="name">
                                        <template v-for="(item, index) in departments">
                                            <el-tag style="margin-right: 5px;background: rgb(100, 213, 114);">{{ item.name }}</el-tag>
                                        </template>
                                    </el-form-item>
                                    <el-form-item label="公司：" prop="name">
                                        <template v-for="(item, index) in companys">
                                            <el-tag style="margin-right: 5px;background: rgb(100, 213, 114);">{{ item.name }}</el-tag>
                                        </template>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col>
                                <el-button>取消</el-button>
                                <el-button type="primary" @click="updateInfo">保存</el-button>
                            </el-col>
                        </el-row>

                    </el-col>
                </el-row>
            </el-col>
        </el-row>

        <el-dialog title="修改密码" :visible.sync="dialogEditPassDialogVisible" :close-on-press-escape="false" :close-on-click-modal="false"  @close="handleCloseDialog" size="tiny">
            <el-form :model="editPasswordForm" :rules="editPasswordRules" ref="editPasswordForm" labelPosition="right" labelWidth="100px" style="width: 400px">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="editPasswordForm.oldPassword"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="editPasswordForm.newPassword"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePass">
                    <el-input v-model="editPasswordForm.rePass"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditPassDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePassword">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { updatePassword } from '@/api/upms/user'
    import {mapGetters} from 'vuex'
    export default {
        name: 'BaseInfo',
        data() {
            const validPhone = (rule, value, callback) => {
                var re = /^1[0-9]{10}$/;
                if (!re.test(value)) {
                    callback(new Error('请输入正确格式的手机号'));
                } else {
                    callback();
                }
            }
            const validRePassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.newPassword) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            }

            return {
                inputCodeVisible: false, // 显示填写验证码box
                hasGetIdentifyCode: false,  // 是否点了获取验证码
                securityCode: '',   //验证码
                gettingIdentifyCodeBtnContent: '获取验证码',  // “获取验证码”按钮的文字
                canGetIdentifyCode: false,  // 是否可点获取验证码
                dialogEditPassDialogVisible: false, // 修改密码Dialog
                form: {
                    realName: '',
                    email: '',
                    mobile: ''
                },
                rules: {
                    realName: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮件地址不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮件格式不正确', trigger: 'blur' }
                    ],
                    mobile: [
                        { required: true, message: '请输入手机号码' },
                        { validator: validPhone }
                    ]
                },
                editPasswordForm: {
                    oldPassword: '',
                    newPassword: '',
                    rePass: ''
                },
                editPasswordRules: {
                    oldPassword: [
                        { required: true, message: '请输入原密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' },
                        { min: 6, message: '请至少输入6个字符', trigger: 'blur' },
                        { max: 32, message: '最多输入32个字符', trigger: 'blur' }
                    ],
                    rePass: [
                        { required: true, message: '请再次输入新密码', trigger: 'blur' },
                        { validator: validRePassword, trigger: 'blur' }
                    ]
                }
            }
        },
        computed: {
            ...mapGetters(['user', 'companys', 'departments', 'roles', 'groups', 'permissions', 'ipCity'])
        },
        methods: {
            handleCloseDialog() {
                this.resetEditPasswordForm()
            },
            getIdentifyCode() {
                this.hasGetIdentifyCode = true
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        this.canGetIdentifyCode = true;
                        let timeLast = 60;
                        let timer = setInterval(() => {
                            if (timeLast >= 0) {
                                this.gettingIdentifyCodeBtnContent = timeLast + '秒后重试';
                                timeLast -= 1;
                            } else {
                                clearInterval(timer);
                                this.gettingIdentifyCodeBtnContent = '获取验证码';
                                this.canGetIdentifyCode = false;
                            }
                        }, 1000);
                        this.inputCodeVisible = true;
                        // you can write ajax request here
                    }
                })
            },
            updateInfo() {  //修改信息

            },
            updatePassword() { //修改密码
                this.$refs['editPasswordForm'].validate((valid) => {
                    if (valid) {
                        updatePassword(this.editPasswordForm).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.dialogEditPassDialogVisible = false
                            } else {
                                this.$notify({
                                    title: '错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        }).catch((error)=>{
                            console.log(error)
                        })
                    }
                })
            },
            resetEditPasswordForm() {
                this.$refs['editPasswordForm'].resetFields()
                this.editPasswordForm = {
                    oldPassword: '',
                    newPassword: '',
                    rePass: ''
                }
            }
        },
        created() {
            this.form.id = this.user.id
            this.form.realName = this.user.realName
            this.form.email = this.user.email
            this.form.mobile = this.user.mobile
            this.editPasswordForm.id = this.user.id
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .mobile{
        position: relative;
        display: block;
        width: 310px;
        .inputCode {
            position: absolute;
            top: -30px;
            right:-220px;
            width: 200px;
            height: 100px;
            border-radius: 4px;
            box-shadow: 0 0 2px 3px rgba(0,0,0,.1);
            .wrapper{
                margin: 10px;
                text-align: right;
            }
        }
    }
</style>